import React, {FC, useContext} from 'react';
import "./JournalDocDownload.less";
import JournalDefaultLayout from "@/pages/JournalPage/JournalDetail/commons/JournalDefaultLayout";
import HxIcon from "@/components/HxIcon";
import {Button, Empty, Space, Spin} from "antd";
import {useRequest} from "ahooks";
import * as API from "@/services";
import {queryFrontJournalTemplates} from "@/services";
import {JournalDetailContext} from "@/pages/JournalPage/JournalDetail/commons/JournalDetailContext";
import {HxConfigContext} from "@/layouts/HxConfigContext";
import {correspVal} from "@/utils/biz";
import {getExtensionFromURL} from "kf-web-library";


interface JournalDocDownloadProps {
}


interface JournalDocDownloadItemProps {
  title: string;
  fileUrl: string
}

function getPathFileExtension(url: string) {
  const match = url.match(/\.([0-9a-z]+)(?:[\?#]|$)/i);
  return match ? match[1] : null;
}

const JournalDocDownloadItem: FC<JournalDocDownloadItemProps> = (props) => {
  const {fileUrl, title} = props;
  let fileExt = getExtensionFromURL(fileUrl) || "";
  let fType = "unknow";
  if ([".doc", ".docx"].includes(fileExt)) {
    fType = 'doc';
  } else if ([".xls", ".xlsx"].includes(fileExt)) {
    fType = 'xls';
  } else if ([".ppt", ".pptx"].includes(fileExt)) {
    fType = 'ppt';
  }
  return (
    <div className={"journal-doc-download-item"}>
      <div className={"journal-doc-download-item-header"}>
        <div className={"journal-doc-download-item-icon"}><HxIcon type={`hxicon-file-${fType}`}/></div>
        <div className={"journal-doc-download-item-title"}>{title}</div>
      </div>
      <div className={"journal-doc-download-item-footer"}>
        <Space>
          {/*<Button target={"_blank"} href={fileUrl} color="default" variant="filled">预览</Button>*/}
          <Button target={"_blank"} href={fileUrl} type={"primary"}>下载</Button>
        </Space>
      </div>
    </div>
  );
};


const JournalDocDownload: FC<JournalDocDownloadProps> = (props) => {
  const {journalId} = useContext(JournalDetailContext)
  const {isZhCN} = useContext(HxConfigContext);
  const recordsReq = useRequest(() => API.queryFrontJournalTemplates({
    journalId: journalId,
  }), {
    ready: !!journalId,
    refreshDeps: [journalId]
  });

  const records = recordsReq.data?.data || [];

  return (
    <JournalDefaultLayout>
      <div className={"journal-doc-download-container"}>
        <Spin spinning={recordsReq.loading}>
          {
            records?.length > 0 ? (
              <div className={"journal-doc-download-items"}>
                {
                  records.map((record) => {
                    return (
                      <JournalDocDownloadItem key={record.id}
                                              title={correspVal(isZhCN, record?.nameCn, record?.nameEn) || "File"}
                                              fileUrl={record.fileUrl || ""}
                      />
                    );
                  })
                }
              </div>
            ) : (
              <Empty/>
            )
          }
        </Spin>
      </div>

    </JournalDefaultLayout>
  );
};

export default JournalDocDownload;
